<template>
  <template v-for="item in menuList" :key="item.menuId">
    <template v-if="!['/exam', '/train'].includes(item.path)">
      <a-menu-item
        v-if="!item.hasChildren"
        :key="item.path"
        popupClassName="menu-nav"
      >
        {{ item.menuName }}
      </a-menu-item>
      <a-sub-menu v-else :key="item.menuId" popupClassName="menu-nav">
        <template #title>
          {{ item.menuName }}
        </template>
        <Menu :menuList="item.children"></Menu>
      </a-sub-menu>
    </template>
  </template>
</template>

<script lang="ts" setup>
import Menu from './Menu.vue'
defineProps({
  menuList: {
    type: Array<any>,
    default: () => []
  }
})
</script>

<style lang="less">
@text-color: #1d2129; // 文字颜色
@active-color: #00796a; // 激活文字颜色

.layout-menu {
  padding: 0 1.5rem;
  background: transparent !important;

  ul {
    li {
      padding: 0 2rem !important;
    }
  }

  .ant-menu {
    color: @text-color !important;
    background: transparent !important;
  }

  .ant-menu-horizontal {
    line-height: 3.75rem;
    border-bottom: none;
    border: 0;
    box-shadow: none;
  }

  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after,
  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover::after,
  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active::after,
  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active::after,
  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open::after,
  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open::after,
  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after,
  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after {
    border-bottom: 0.125rem solid @active-color !important;
    background-color: transparent !important;
  }

  .ant-menu-submenu-selected,
  .ant-menu-item-selected,
  .ant-menu-item:hover,
  .ant-menu-submenu-active,
  .ant-menu-submenu-open {
    color: @active-color !important;
    // background: url('@/assets/images/header/menu-bar-active.png');
    // background-size: 100% 100%;

    .ant-menu-title-content {
      font-weight: 500 !important;
    }
  }

  .ant-menu-submenu-open,
  .ant-menu-submenu-title:hover,
  .ant-menu-item:hover {
    color: @active-color !important;
  }

  // .ant-menu-submenu-title {
  //   display: flex;
  //   align-items: center;

  //   &::after {
  //     margin-left: 0.375rem;
  //     width: 1rem;
  //     height: 1rem;
  //     background-size: 100% 100%;
  //     content: '';
  //     background-image: url(@/assets/images/header/caret-down-filled.png);
  //   }

  //   &:hover::after {
  //     background-image: url(@/assets/images/header/caret-up-filled.png);
  //   }
  // }

  // .ant-menu-submenu-open {
  //   .ant-menu-submenu-title::after {
  //     background-image: url(@/assets/images/header/caret-up-filled.png);
  //   }
  // }
}

.menu-nav {
  .ant-menu-vertical.ant-menu-sub {
    min-width: 7.75rem;
    border-right: 1px solid rgb(217 225 250 / 24%);
  }

  ul {
    padding: 0.375rem 0.25rem !important;
    background-color: @base-bg-color !important;
    border-radius: 0.25rem !important;

    li {
      color: @text-color;

      &:hover {
        color: @active-color !important;
        background-color: rgb(0 121 106 / 12%) !important;
      }
    }
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected::before {
    border-left: none !important;
  }

  .ant-menu-item-selected {
    background-color: rgb(0 121 106 / 12%) !important;

    span {
      color: @active-color;
    }
  }

  .ant-menu-vertical > .ant-menu-item {
    padding: 0 !important;
    margin: 0;
    height: 2.25rem;
    line-height: 2.25rem;
    text-align: center;
  }

  .ant-menu-vertical .ant-menu-item:not(:last-child),
  .ant-menu-vertical-left .ant-menu-item:not(:last-child),
  .ant-menu-vertical-right .ant-menu-item:not(:last-child),
  .ant-menu-inline .ant-menu-item:not(:last-child) {
    margin: 0;
  }
}
</style>
